<template>
  <div class="main-right">
    <!--main-top-->
    <div class="main-top">
      <div class="page-breadcrumb">
        {{$route.meta.title}}
        <el-breadcrumb >
          <template v-for="item in $route.matched">
            <el-breadcrumb-item :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </div>
    </div>
    <!--main-bottom-->
    <div class="main-bottom">
      <div class="main-bottom-screen">
        <el-input v-model="keyword" placeholder="请输入内容"></el-input>
        <el-button type="primary" class="fl-right" @click="newItem">添加文章</el-button>
      </div>
      <div class="main-cont">
        <el-table
          :data="itemList"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="编号"
            prop="id"
            width="80">
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题" >
          </el-table-column>
          <el-table-column
            prop="views"
            label="浏览次数"
            width="120">
          </el-table-column>
          <el-table-column
          label="创建时间"
          width="150">
            <template scope="scope">
              {{scope.row.createdAt | time}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template scope="scope">
              <el-button size="small" @click="editItem(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="removeItem(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main-other">
        <el-pagination
          layout="prev, pager, next"
          :page-size="params.pagination.pageLength"
          :total="params.pagination.pageTotal"
          :current-page="params.pagination.pageNum">
        </el-pagination>
      </div>
    </div>

    <!--editform-->
    <el-dialog :title="editForm.title+'文章'" v-model="editForm.visible" size="full">
      <el-form :model="editForm.data" :rules="editForm.rules" ref="editForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.data.title"></el-input>
        </el-form-item>
        <el-form-item label="文章栏目" prop="menuId">
          <el-select v-model="editForm.data.menuId" placeholder="请选择文章栏目">
            <el-option v-for="item in menus" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>

        </el-form-item>

        <el-form-item label="内容" prop="content">
          <br/>
          <mavonEditor v-model="editForm.data.content" @change="contentChange"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editForm.visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm('editForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { mavonEditor } from 'mavon-editor'
  import Api from "../../api/index";
export default {
  data () {
    return {
        itemList:[],
      menus:[],
      editForm:{
        data:{
          id:"",
          title:"",
          menuId:"",
          remark:"",
          content:"",
          userId:"",
        },
        rules:{
          title:[
            {required:true,message:"请填写标题",trigger:"blur"}
          ],
          menuId:[
            {type:"number",required:true,message:"请选择文章栏目",trigger:"blur"}
          ],
          content:[
            {required:true,message:"请填写内容",trigger:"blur"}
          ]
        },
        title:"添加",
        visible:false,
        index:""
      },
      params:{
            pagination:{
                pageNum:1
            },
        screen:{},
        orderby:""
      },
      keyword:""
    }
  },
  methods:{
      getItem:function () {
        Api.getArticle(this.params).then((response)=>{
            if(response.status===200){
                this.itemList=response.data.articles;
            }
        })
      },
    newItem:function () {
      this.editForm.data.id="";
      this.editForm.data.title="";
      this.editForm.data.content="";
      this.editForm.data.remark="";
      this.editForm.data.menuId="";
      this.editForm.visible=true;
    },
    editItem:function (index,row) {
      this.editForm.data.id=row.id;
      this.editForm.data.title=row.title;
      this.editForm.data.content=row.content;
      this.editForm.data.remark=row.remark;
      this.editForm.data.menuId=row.menuId;
      this.editForm.data.userId=row.userId;
      this.editForm.index=index;
      this.editForm.visible=true;
    },
    removeItem:function (index,row) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          Api.removeArticle(row.id).then((response)=>{
            if(response.status===204){
              this.itemList.splice(index,1);
              this.$message.success("删除成功！");
            }else{
              this.$message.error(response.data.error);
            }
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    removeHTMLTag: function (str) {
        str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
        str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
        //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
        str=str.replace(/&nbsp;/ig,'');//去掉&nbsp;
        str=str.replace(/\s/g,''); //将空格去掉
        return str;
      },
  contentChange:function (value,reder) {
      this.editForm.data.remark=this.removeHTMLTag(reder);
    },
    confirm:function (formName) {//表单提交
      this.$refs[formName].validate((valid)=>{
          if(valid){//验证通过
            if(this.editForm.data.id){//更新
              Api.updateArticle(this.editForm.data.id,this.editForm.data).then((response)=>{
                if(response.status===200){
                    this.itemList[this.editForm.index].title=this.editForm.data.title;
                    this.itemList[this.editForm.index].content=this.editForm.data.content;
                    this.itemList[this.editForm.index].remark=this.editForm.data.remark;
                    this.itemList[this.editForm.index].menuId=this.editForm.data.menuId;
                  this.$message.success("修改成功！");
                  this.editForm.visible=false;
                }else{
                  this.$message.error(response.data.error);
                }
              })

            }else{//新增
              Api.createArticle(this.editForm.data).then((response)=>{
                  if(response.status===200){
                      this.getItem();
                      this.$message.success("新增成功！");
                      this.editForm.visible=false;
                  }else{
                      this.$message.error(response.data.error);
                  }
              })
            }
          }
      })
    }
  },
  mounted(){
      this.getItem();
      Api.getMenu().then((response)=>{
          if(response.status===200){
              this.menus=response.data.menus;
          }
      })
  },
  components: {
    mavonEditor
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
